<div class="layui-fluid" id="VIEW-list-table" lay-title="sku列表" lig-title="sku-title">
    <div class="layui-card">
        <div class="layui-card-header" lig-lang="label-searchTitle">筛选数据</div>
        <div class="layui-card-body">
            <div class="layui-row layui-col-space10 layui-form">
                <form class="layui-form" lay-filter="lig-sku-searchform">
                    <div class="layui-row">
                        <div class="layui-inline">
                            <label class="layui-form-label" lig-lang="sku-spbh">商品编号</label>
                            <div class="layui-inline">
                                <input type="text" class="layui-input" name="spbh" />
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" lig-lang="sku-spmc">商品名称</label>
                            <div class="layui-inline">
                                <input type="text" class="layui-input" name="spmc" />
                            </div>
                        </div>
                    </div>
                    <div class="layui-row" style="margin-top:10px;">
                        <div class="layui-inline">
                            <label class="layui-form-label" lig-lang="sku-splb">首饰品种</label>
                            <div class="layui-inline">
                                <select name="splb" lay-filter="lig-splb">
                                    <option value=""></option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" lig-lang="sku-fSh">审核状态</label>
                            <div class="layui-inline">
                                <select name="fSh">
                                    <option value=""></option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-row layui-col-space10">
                                <div class="layui-col-xs6">
                                    <div class="layui-btn layui-btn-sm layui-btn-fluid" lay-filter="lig-sku-search" lig-lang="btn-search">查询</div>
                                </div>
                                <div class="layui-col-xs6">
                                    <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary" lig-lang="btn-reset">重置</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body nepadmin-table-full">
            <div class="layui-btn-container nepadmin-pad-t10 nepadmin-pad-l10">
                <div class="layui-btn layui-btn-sm" lay-filter="lig-sku-add" lig-lang="btn-addSku">添加sku</div>
            </div>
            <table lay-filter="lig-sku-table"></table>
        </div>
    </div>
</div>
<script type="text/html" id="tpl-row-toolBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="lig-modify" lay-filter="lig-sku-modify" lig-lang="btn-modify">修改</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="lig-delete" lay-filter="lig-sku-delete" lig-lang="btn-delete">删除</a>
    {{# if (d.fSh == '0201') { }}
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="lig-checked" lay-filter="lig-sku-checked" lig-lang="btn-checked">审核</a>
    {{# } else if (d.fSh == '0202') { }}
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="lig-uncheck" lay-filter="lig-sku-uncheck" lig-lang="btn-uncheck">取消审核</a>
    {{# } }}
</script>
<script type="text/html" id="tpl-sku-modify">
    <form class="layui-form" lay-filter="lig-saveForm">
        <input type="hidden" name="skuId" value="{{d.skuId}}"/>
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this" lig-lang="sku-baseInfo">基本信息</li>
                <li lig-lang="sku-picInfo">图片及视频</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form-item">
                        <label class="layui-form-label ligui-form-item-required" lig-lang="sku-splb">首饰品种</label>
                        <div class="layui-input-block">
                            <select name="splb" lay-filter="lig-splb" lay-verify="required" lay-data="{{d.splb}}">
                                <option value=""></option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label ligui-form-item-required" lig-lang="sku-spmc">商品名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="spmc" autocomplete="off"
                                   class="layui-input" value="{{d.spmc}}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label ligui-form-item-required" lig-lang="sku-cz">贵金属材质</label>
                        <div class="layui-input-block">
                            <select name="cz" lay-filter="lig-cz" lay-verify="required" lay-data="{{d.cz}}">
                                <option value=""></option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label ligui-form-item-required" lig-lang="sku-purity">纯度</label>
                        <div class="layui-input-block">
                            <select name="purity" lay-filter="lig-purity" lay-verify="required" lay-data="{{d.purity}}">
                                <option value=""></option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" lig-lang="sku-zl">质量</label>
                        <div class="layui-input-inline">
                            <input type="text" name="zl" autocomplete="off"
                                   class="layui-input" value="{{d.zl}}">
                        </div>
                        <div class="layui-form-mid layui-word-aux">g</div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label" lig-lang="sku-pp">品牌</label>
                        <div class="layui-input-block">
                            <input type="text" name="pp" autocomplete="off"
                                   class="layui-input" value="{{d.pp}}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" lig-lang="sku-gemName">宝石名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="gemName" autocomplete="off"
                                   class="layui-input" value="{{d.gemName}}">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" lig-lang="sku-gemQuality">宝石质量</label>
                        <div class="layui-input-block">
                            <input type="text" name="gemQuality" autocomplete="off"
                                   class="layui-input" value="{{d.gemQuality}}">
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn layui-btn-normal" lay-filter="lig-upload">选择多文件</button>
                        <input class="layui-upload-file" type="file" accept="" name="file" multiple="">
                        <div class="layui-upload-list">
                            <table class="layui-table">
                                <thead>
                                    <tr>
                                        <th lig-lang="file-fileName">文件名</th>
                                        <th lig-lang="file-fileSize">大小</th>
                                        <th lig-lang="file-status">状态</th>
                                        <th lig-lang="file-opt">操作</th>
                                    </tr>
                                </thead>
                                <tbody lay-filter="lig-fileList">
                                {{#
                                    layui.each(d.fileList, function(i, it) {
                                }}
                                <tr>
                                    <input type="hidden" name="file" data-fileId="{{it.fileId}}" data-fileName="{{it.fileName}}" data-fileSize="{{it.fileSize}}" data-fileUrl="{{it.fileUrl}}" data-fileSuffix="{{it.fileSuffix}}"/>
                                    <td><a href="/platform/file/download?url={{it.fileUrl}}&&name={{it.fileName}}" target="_blank">{{it.fileName}}</a></td>
                                    <td>{{it.fileSize}}kb</td>
                                    <td lig-lang="file-uploadSuccess">完成上传</td>
                                    <td>
                                        <button class="layui-btn layui-btn-xs layui-btn-danger" lay-filter="lig-file-delete" lig-lang="btn-delete">删除</button>
                                    </td>
                                </tr>
                                {{#
                                    });
                                }}
                                </tbody>
                            </table>
                        </div>
                        <button type="button" class="layui-btn" id="testListAction" lig-lang="btn-upload">开始上传</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</script>
<script type="text/html" id="tpl-sku-add">
    <form class="layui-form" lay-filter="lig-saveForm">
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this" lig-sku="sku-baseInfo">基本信息</li>
                <li lig-lang="sku-picInfo">图片及视频</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form-item">
                        <label class="layui-form-label ligui-form-item-required" lig-lang="sku-splb">首饰品种</label>
                        <div class="layui-input-block">
                            <select name="splb" lay-filter="lig-splb" lay-verify="required">
                                <option value=""></option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label ligui-form-item-required" lig-lang="sku-spmc">商品名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="spmc" autocomplete="off" lay-verify="required"
                                   class="layui-input" value="">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label ligui-form-item-required" lig-lang="sku-cz">贵金属材质</label>
                        <div class="layui-input-block">
                            <select name="cz" lay-filter="lig-cz" lay-verify="required">
                                <option value=""></option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label ligui-form-item-required" lig-lang="sku-purity">纯度</label>
                        <div class="layui-input-block">
                            <select name="purity" lay-filter="lig-purity" lay-verify="required">
                                <option value=""></option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" lig-lang="sku-zl">质量</label>
                        <div class="layui-input-inline">
                            <input type="text" name="zl" autocomplete="off"
                                   class="layui-input" value="">
                        </div>
                        <div class="layui-form-mid layui-word-aux">g</div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label" lig-lang="sku-pp">品牌</label>
                        <div class="layui-input-block">
                            <input type="text" name="pp" autocomplete="off"
                                   class="layui-input" value="">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" lig-lang="sku-gemName">宝石名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="gemName" autocomplete="off"
                                   class="layui-input" value="">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label" lig-lang="sku-gemQuality">宝石质量</label>
                        <div class="layui-input-block">
                            <input type="text" name="gemQuality" autocomplete="off"
                                   class="layui-input" value="">
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn layui-btn-normal" lay-filter="lig-upload">选择多文件</button>
                        <input class="layui-upload-file" type="file" accept="" name="file" multiple="">
                        <div class="layui-upload-list">
                            <table class="layui-table">
                                <thead>
                                    <tr>
                                        <th lig-lang="file-fileName">文件名</th>
                                        <th lig-lang="file-fileSize">大小</th>
                                        <th lig-lang="file-status">状态</th>
                                        <th lig-lang="file-opt">操作</th>
                                    </tr>
                                </thead>
                                <tbody lay-filter="lig-fileList"></tbody>
                            </table>
                        </div>
                        <button type="button" class="layui-btn" id="testListAction" lig-lang="btn-upload">开始上传</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</script>
<script type="text/html" id="tpl-zl">
    {{#
    var zl = '';
    if (d.zl != '') {
        zl = d.zl + 'g';
    }
    }}
    <span>{{zl}}</span>
</script>
<script>
    layui.use(['admin', 'table', 'form', 'dropdown', 'laytpl', 'upload', 'jquery','lig'], function (admin, table, form, dropdown, laytpl, upload, $, lig) {
        form.render();

        lig.selectSplb('lig-sku-searchform');
        lig.loadSelectDict('sku_fSh', '[lay-filter="lig-sku-searchform"] select[name="fSh"]');

        var dataTable = lig.table({
            elem: '[lay-filter="lig-sku-table"]',
            url: 'pd/sku/page',
            cols: [[
                { title: '<span lig-lang="label-opt">操作</span>', toolbar: '#tpl-row-toolBar', align: 'left', width: 200, fixed: 'left'},
                { title: '<span lig-lang="sku-spbh">商品编号</span>', field: 'spbh', minWidth: 200 },
                { title: '<span lig-lang="sku-splb">首饰品种</span>', field: 'splbmc', minWidth: 100 },
                { title: '<span lig-lang="sku-spmc">商品名称</span>', field: 'spmc', minWidth: 100 },
                { title: '<span lig-lang="sku-pp">品牌</span>', field: 'pp', minWidth: 100 },
                { title: '<span lig-lang="sku-cz">贵金属材质</span>', field: 'czName', minWidth: 100 },
                { title: '<span lig-lang="sku-zl">质量</span>', field: 'zl', minWidth: 100, templet: '#tpl-zl' },
                { title: '<span lig-lang="sku-purity">纯度</span>', field: 'purityName', minWidth: 100 },
                { title: '<span lig-lang="sku-gemName">宝石名称</span>', field: 'gemName', minWidth: 100 },
                { title: '<span lig-lang="sku-gemQuality">宝石质量</span>', field: 'gemQuality', minWidth: 100 },
                { title: '<span lig-lang="sku-fsh">审核状态</span>', field: 'fshmc', minWidth: 100 }
            ]]
        },{
            mode: 'dialog',
            entity: 'sku',
            primaryField: 'skuId',
            onSave: function(data) {
                var files = [];
                $('[lay-filter="lig-fileList"] > tr').each(function () {
                    var input = $(this).find('input[name="file"]');
                    files.push({
                        fileId: input.attr('data-fileId'),
                        fileName: input.attr('data-fileName'),
                        fileUrl: input.attr('data-fileUrl'),
                        fileSuffix: input.attr('data-fileSuffix'),
                        fileSize: input.attr('data-fileSize')
                    })
                });
                data.files = JSON.stringify(files);
            },
            addContent: $('#tpl-sku-add').html(),
            addUrl: 'pd/sku/add',
            addTitle: '<span lig-lang="sku-addSku">添加sku</span>',
            onAddOpened: function() {
                lig.selectSplb('lig-saveForm');
                lig.loadSelectDict('sku-cz', '[lay-filter="lig-saveForm"] select[name="cz"]');
                lig.loadSelectDict('sku-purity', '[lay-filter="lig-saveForm"] select[name="purity"]');
                uploader();
            },

            modifyContent: $('#tpl-sku-modify').html(),
            modifyUrl: 'pd/sku/modify',
            modifyTitle: '<span lig-lang="sku-modifySku">修改sku</span>',
            onModifyOpened: function() {
                lig.selectSplb('lig-saveForm');
                lig.loadSelectDict('sku-cz', '[lay-filter="lig-saveForm"] select[name="cz"]');
                lig.loadSelectDict('sku-purity', '[lay-filter="lig-saveForm"] select[name="purity"]');
                uploader();
            },

            removeUrl: 'pd/sku/remove',
            getUrl: 'pd/sku/{skuId}',
            onTool: function (obj) {
                var event = obj.event, id = obj.data.skuId;
                if (event == 'lig-checked') {
                    checked(id);
                } else if (event == 'lig-uncheck') {
                    uncheck(id);
                }
            },
            area:['60%', '590px']
        });


        function checked(id) {
            if (id != '') {
                lig.ajaxpost({
                    url: 'pd/sku/ifSh/yes',
                    data: {ids: id},
                    success: function () {
                        lig.success();
                        dataTable.reloadTable();
                    }
                });
            }
        }
        function uncheck(id) {
            if (id != '') {
                lig.ajaxpost({
                    url: 'pd/sku/ifSh/no',
                    data: {ids: id},
                    success: function () {
                        lig.success();
                        dataTable.reloadTable();
                    }
                });
            }
        }

        function uploader() {
            //多文件列表示例
            var fileListView = $('[lay-filter="lig-fileList"]')
                ,uploadListIns = upload.render({
                elem: '[lay-filter="lig-upload"]'
                ,url: 'platform/file/upload' //改成您自己的上传接口
                ,accept: 'file'
                ,multiple: true
                ,auto: false
                ,bindAction: '#testListAction'
                ,choose: function(obj){
                    var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                    //读取本地文件
                    obj.preview(function(index, file, result){
                        var tr = $(['<tr id="upload-'+ index +'">'
                            ,'<td>'+ file.name +'</td>'
                            ,'<td>'+ (file.size/1024).toFixed(1) +'kb</td>'
                            ,'<td>等待上传</td>'
                            ,'<td>'
                            ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                            ,'</td>'
                            ,'</tr>'].join(''));

                        //单个重传
                        tr.find('.demo-reload').on('click', function(){
                            obj.upload(index, file);
                        });

                        //删除
                        tr.find('.demo-delete').on('click', function(){
                            delete files[index]; //删除对应的文件
                            tr.remove();
                            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                        });

                        fileListView.append(tr);
                    });
                }
                ,done: function(res, index, upload){
                    if (res.code == 'success') {//上传成功
                        if(res.data){
                            var file = res.data[0];
                            var tr = fileListView.find('tr#upload-'+ index)
                                ,tds = tr.children();
                            tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                            tds.eq(3).html(''); //清空操作
                            tr.append('<input type="hidden" name="file" data-fileId="" data-fileName="' + file.fileName + '" data-fileSize="' + file.fileSize + '" data-fileUrl="' + file.fileUrl + '" data-fileSuffix="' + file.fileSuffix + '"/>');
                            return delete this.files[index]; //删除文件队列已经上传成功的文件
                        }
                    } else {
                        lig.error(res.message);
                        this.error(index, upload);
                    }
                }
                ,error: function(index, upload){
                    var tr = fileListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                    tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                }
            });

            fileListView.find('[lay-filter="lig-file-delete"]').click(function () {
                $(this).parents('tr').remove();
            });
        }


        function getSelected() {
            var _datas = table.checkStatus('skuId').data,  _ids = ''
                , _length = _datas.length;
            if (_length > 0) {
                $.each(_datas, function (i, item) {
                    _ids += "," + item["skuId"];
                });
                if (_ids != '') {
                    _ids = _ids.substring(1);
                }
            }
            return _ids;
        }

    })
</script>